<div class="layui-col-md8">
  <div class="layui-card">
    <div class="layui-card-body">
      <form class="layui-form" action="">
        <div class="layui-form-item">
          <div class="layui-input-inline">
            <select name="page" lay-verify="page" lay-filter="page">
              <option value="">页面</option>
            </select>  
          </div>   
        </div> 
      </form>
    </div>
  </div>
</div>
<div class="layui-col-md4">
  <div class="layui-card">
    <div class="layui-card-body">
      <button class="layui-btn layui-btn-sm">添加关键词</button>
      <button class="layui-btn layui-btn-sm layui-btn-normal">添加语种</button>
      <button class="layui-btn layui-btn-sm layui-btn-danger">删除</button>
    </div>
  </div>
</div>
<div class="layui-col-md12">
  <div class="layui-card">
    <div id="a1"></div>
    <div class="layui-card-body">
      <table id="table1" lay-filter="table1"></table>
    </div>
  </div>
</div>

<script>
var access_token = sessionStorage.access_token;
var userId = sessionStorage.userid;

layui.use(['table','form'], function(){
  var table = layui.table;
  var form = layui.form;
  form.render();
  formShow();
  
  function formShow(pageId,keyword){
    table1 = table.render({
      elem:'#table1',
      height: 528, //容器高度
      url: 'actionApi/LangManage/list',
      where: {
        "keyword":keyword,
        "pageId":pageId,
      },
      headers:{"Authorization":"Basic "+access_token},
      even:true,
      height:'full-200',
      size:'sm',
      method: 'post',
      id:'table1',
      limit:20,
      limits:[20, 50, 200, 500],
      page: true, //是否开启分页
      cols:  [[ //标题栏
        {type:'checkbox', fixed: 'left',width:30},
        {field: 'YE_MIAN_MING',title:'页面',width:150, sort: true,align:'center',style:"text-align:center;font-size:12px;"},
        {field: 'XU_HAO', title: '关键词', width:200, sort: true,align:'center',style:"text-align:center;font-size:12px;"},
        {field: 'YU_ZHONG', title: '语种', width:100, sort: true,align:'center',style:"text-align:center;font-size:12px;"},
        {field: 'WEN_ZI', title: '文字',  sort: true,align:'center',style:"text-align:left;font-size:12px;",edit:"text"}
      ]],
      done: function(res, curr, count){
        table1Data = res.data;
        
      }
    }); 
  }
  
  //监听单元格事件
  table.on('tool(table1)', function(obj){
    var data = obj.data;
    if(obj.event === 'devMore'){
      console.log(data);
    }
  });
  
  //初始化select
  $('select[name="type"]').attr('disabled','disabled');
  $('select[name="site"]').attr('disabled','disabled');
  $('select[name="style"]').attr('disabled','disabled');
  $('select[name="stn"]').attr('disabled','disabled');
  
  var selectData;
  //获取select选项
  $.ajax({
    url: 'actionApi/LangManage/select',
    type:'post',
    headers:{"Authorization":"Basic "+access_token},
    success:function(res){
      selectData = res.data;
      var pageList = selectData;
      for(var key in pageList){
        $('select[name="page"]').append('<option value="'+pageList[key]+'">'+pageList[key]+'</option>');
      }
      form.render('select');
    }
  });
  
  //select选择事件
  form.on('select', function(data){
    var pageId = $('select[name="page"]').val();
    var keyword = '';
    formShow(pageId,keyword);
    
  });
});




</script>